<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>查询页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="query">
            <div class="header">
                <div style="margin: 0 15px;">
                    商品名称：<el-input size="medium" v-model="form.value" style="width: 200px; margin-right:10px;"
                        placeholder="请输入商品名称" clearable></el-input>
                    <el-button icon="el-icon-search" size="medium" @click="handleSerach">查询</el-button>
                    <el-button icon="el-icon-upload2" size="medium" type="success" :loading="isExport"
                        @click="handleExport" plain round>批量导出</el-button>
                    <el-button icon="el-icon-setting" size="medium" type="info" plain round
                        @click="dialogFieldVisible = true">设置显示字段</el-button>
                </div>
            </div>
            <el-row class="main" type="flex">
                <el-col :span="24" class="right"><!-- 如果有tabs 高度要调整  -->
                    <!-- 状态筛选 Tabs（卡片样式，与供货订单一致） -->
                    <el-tabs v-model="form.value2" type="card" @tab-click="handleTabsClick">
                        <el-tab-pane name="-">
                            <div slot="label" style="display:flex;align-items:center;justify-content:center;">
                                <span style="display:flex;align-items:center;margin-right:10px;">
                                    <i style="width:10px;height:10px;background:#67C23A;margin-right:2px;"></i>
                                    <i style="width:10px;height:10px;background:#E6A23C;margin-right:2px;"></i>
                                    <i style="width:10px;height:10px;background:#F56C6C;"></i>
                                </span>
                                全部
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="0">
                            <div slot="label" style="display:flex;align-items:center;justify-content:center;">
                                <i style="width:10px;height:10px;background:#E6A23C;margin-right:10px;"></i>待审核
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <div slot="label" style="display:flex;align-items:center;justify-content:center;">
                                <i style="width:10px;height:10px;background:#67C23A;margin-right:10px;"></i>已通过
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="3">
                            <div slot="label" style="display:flex;align-items:center;justify-content:center;">
                                <i style="width:10px;height:10px;background:#F56C6C;margin-right:10px;"></i>拒绝
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <el-table id="table" border v-if="isUpdate" height="calc(100% - 47px)"
                        :data-options="JSON.stringify({'tableName':'supply_order','primaryKey':'Supply_Order_SerialNumber'})"
                        v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="tableData"
                        @selection-change="handleSelectionChange">
                        <el-table-column :align="column.Column_Align" :min-width="column.Column_Width"
                            :show-overflow-tooltip="column.Overflow == '0'" v-for="column in columns"
                            :key="column.COLUMN_NAME" :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                            <template v-slot="{row}">
                                <div v-if="column.Column_Type=='1'">
                                    <el-image style="width: 100px; height: 100px"
                                        :preview-src-list="[(imageApi + row[column.COLUMN_NAME])]"
                                        :src="imageApi + row[column.COLUMN_NAME]" fit="contain"></el-image>
                                </div>
                                <template v-else>
                                    {{row[column.COLUMN_NAME]}}
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" width="90" fixed="right" prop="Row_Status" label="状态">
                            <template v-slot="{row}">
                                <el-tag :type="row.Row_Status === '2' ? 'success' : (row.Row_Status === '0' ? 'warning' : 'danger')">
                                    {{ row.Row_Status === '0' ? '待审核' : (row.Row_Status === '1' ? '已删除' : (row.Row_Status === '2' ? '已通过' : '已拒绝')) }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="300">
                            <template v-slot="{row}">
                                <div style="display: flex; align-items: center; gap:10px;">
                                    <el-button size="small" type="primary" @click="handleShow(row)">详情</el-button>
                                    <el-button v-if="row.Row_Status=='2'" size="small" types="primary" @click="confirmContract(row)">确认合同</el-button>
                                    <el-button size="small" type="primary" @click="openSupplyInvoiceDialog(row)">开发票</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 15px;" :current-page="form.PageNumber" :page-size="form.RowAmount"
                        :page-sizes="[20, 40, 60, 80, 100]" layout="total, sizes, prev, pager, next, jumper" background
                        :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-col>
            </el-row>
            <!-- 确认合同方式弹窗 -->
            <el-dialog title="确认合同方式" :visible.sync="confirmContractDialogVisible" width="480px" :close-on-click-modal="false">
                <div style="display:flex; justify-content:center; gap:24px; padding: 10px 0 20px;">
                    <el-button type="primary" size="medium" @click="startOnlineSigning(confirmContractRow)">线上签约</el-button>
                    <el-button size="medium" @click="startOfflineSigning(confirmContractRow)">线下签约</el-button>
                </div>
            </el-dialog>
             <field-config :visible.sync="dialogFieldVisible" @success="getColumn(false)"></field-config>
            <el-dialog title="上传发票" :visible.sync="dialogSupplyInvoiceVisible" width="500px" :close-on-click-modal="false">
                <div style="display:flex; align-items:center; gap:16px;">
                    <el-upload :show-file-list="false" list-type="picture-card" action="" accept="image/*" :on-change="uploadSupplyInvoice" :auto-upload="false">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <div v-if="supplyInvoicePictureUrl" style="flex:1;">
                        <el-image style="width:148px;height:148px" :src="imageApi + supplyInvoicePictureUrl" :preview-src-list="[imageApi + supplyInvoicePictureUrl]" fit="contain"></el-image>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogSupplyInvoiceVisible=false">取消</el-button>
                    <el-button type="primary" :loading="supplyInvoiceUploading" @click="submitSupplyInvoice">提交</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>
